<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">全部服务</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <!-- 搜索 -->
      <view class="sousuobox">
        <view class="sounpx">
          <view class="left flex" style="width: 100%">
            <view @click="store.to('/pages/public/addressqh')">{{
              store.cityInfo.areaname || '安阳市'
            }}</view>
            <uni-icons
              @click="store.to('/pages/public/addressqh')"
              type="down"
              size="12"
              color="#999"
            ></uni-icons>
            <view class="line"></view>
            <view
              class="flex"
              @click="store.to('/pages/server/sousuo')"
              style="flex: 1"
            >
              <uni-icons type="search" size="20" color="#999"></uni-icons>
              <view class="t2">请输入关键字</view>
            </view>
            <view class="btn">搜索</view>
          </view>
        </view>
      </view>

      <!-- 分类 -->
      <view class="flcenter">
        <!-- 左侧导航 -->
        <scroll-view class="left" scroll-y="true">
          <view
            class="ulList"
            :class="{ ac: indexs === index }"
            v-for="(item, index) in goodsFlList"
            :key="index + 1"
            @click="indexs = index"
          >
            <text class="lecel_1_text" :class="{ ac: indexs === index }">{{
              item.goods_category_title
            }}</text>
            <template v-if="indexs === index">
              <view
                @click.stop="indexsr = y"
                class="lis"
                :class="{ ac: indexsr === y }"
                v-for="(i, y) in GoodsCategoryList"
                :key="y + 1"
                >{{ i.goods_category_title }}</view
              >
            </template>
          </view>
        </scroll-view>
        <!-- 右侧内容 -->
        <view class="right">
          <scroll-view
            v-if="GoodsCategoryList.length"
            scroll-y
            class="scroll-Y"
            :scroll-into-view="scrollTarget"
            scroll-with-animation
          >
            <!-- 右侧二级+三级内容 -->
            <view
              :id="`d${index}`"
              v-for="(item, index) in GoodsCategoryList"
              :key="index + 1"
            >
              <!-- 二级标题 -->
              <view class="title" :class="{ ac: !index }">{{
                item.goods_category_title
              }}</view>
              <!-- 二级内的三级内容 -->
              <view class="ulboxs">
                <view
                  class="lib"
                  v-for="(i, y) in item.child"
                  :key="y + 1"
                  @click="tcFun(i)"
                >
                  <image :src="i.icon_details" mode="aspectFill" />
                  <view class="name">{{ i.goods_category_title }}</view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="flex_center wfw_box" v-else>
            <image
              class="wfw_img"
              :src="`${store.imgDomain}home_6.png`"
              mode="widthFix"
            />
            <text>暂无服务</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部菜单 -->
    <tabBar :current-index="1" :tab-list="store.tabList"></tabBar>
  </view>
</template>

<script setup>
import {
  ref,
  computed,
  reactive,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import request from '@/utils/request';
import tabBar from '@/components/tabBar.vue';
import Drawer from '@/components/Drawer.vue';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
const title = ref('全部服务');
const indexs = ref(0);
const indexsr = ref(0);
const options = ref({});
const goodsFlList = ref([]);
const GoodsCategoryList = ref([]);
const first_level_goods_category_id = ref('');

// 判断是否有项目，没有提示，有跳转详情
const tcFun = async (item) => {
  try {
    const data = await request(
      'wxapp/index/getGoodsInfoAndRelationGoodsByGoodsCategoryId',
      { goods_category_id: item.id },
    );
    if (data.length) {
      store.to(`/pages/server/serverDetails?id=${item.id}&type=2`);
    } else {
      uni.showToast({
        title: '暂无相关服务，请联系客服',
        icon: 'none',
      });
    }
  } catch {
    uni.showToast({
      title: '暂无相关服务，请联系客服',
      icon: 'none',
    });
  }
};

watch(
  () => indexs.value,
  () => {
    GoodsCategoryList.value = [];
  },
);

// 获取一级服务分类数据
const getFirstLevelGoodsCategory = async () => {
  goodsFlList.value = await request('wxapp/index/getFirstLevelGoodsCategory');

  if (!goodsFlList.value.length) return;
  first_level_goods_category_id.value = goodsFlList.value[0].id;

  if (options.value.id) {
    if (options.value.goods_category_level === 1) {
      indexs.value = goodsFlList.value.findIndex(
        (i) => i.id === options.value.id,
      );
    } else {
      indexs.value = goodsFlList.value.findIndex(
        (i) => i.id === options.value.pid,
      );
    }
    first_level_goods_category_id.value = goodsFlList.value[indexs.value].id;
  }

  getChildGoodsCategoryList();
};
// 获取给定1级分类对应的2级和3级分类
const getChildGoodsCategoryList = async () => {
  GoodsCategoryList.value = await request(
    'wxapp/index/getChildGoodsCategoryList',
    {
      first_level_goods_category_id: first_level_goods_category_id.value,
    },
  );
  if (options.value.goods_category_level === 2) {
    indexsr.value = GoodsCategoryList.value.findIndex(
      (i) => i.id === options.value.pid,
    );
  }
};
const scrollTarget = computed(() => {
  return `d${indexsr.value}`;
});

watch(
  () => indexs.value,
  (val) => {
    indexsr.value = 0;
    first_level_goods_category_id.value = goodsFlList.value[val].id;
    getChildGoodsCategoryList();
  },
);

onLoad(() => {
  if (!store.open_id || store.is_type != 1) return;
  options.value = JSON.parse(JSON.stringify(store.options));
  store.options = {};
  indexs.value = 0;
  indexsr.value = 0;
  console.log('options.value=>', options.value);
  getFirstLevelGoodsCategory();
});
</script>

<style scoped lang="scss">
.topbars {
  background: linear-gradient(to right, #2f80ff, #3184ff);
}
.sousuobox {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
}
.sounpx {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 12rpx 12rpx 12rpx 20rpx;
  border-radius: 37rpx;
  background-color: #fff;
  .left {
    display: flex;
    align-items: center;

    view {
      flex-shrink: 0;
      font-size: 24rpx;
    }
    .line {
      width: 1rpx;
      height: 38rpx;
      margin: 0 20rpx;
      background-color: $uni-text-color-grey;
    }
    .t2 {
      margin-left: 5rpx;
      color: $uni-text-color-grey;
    }
  }
  .btn {
    padding: 0 33rpx;
    background-color: #0086f2;
    line-height: 51rpx;
    border-radius: 25rpx;
    color: #fff;
    font-size: 24rpx;
  }
}
.page_content {
  background: linear-gradient(to right, #2f80ff, #3184ff);
  display: flex;
  flex-direction: column;
  .flcenter {
    flex: 1;
    border-radius: 20rpx 20rpx 0 0;
    background-color: #fff;
    display: flex;
    overflow: hidden;
    .left {
      height: 80vh;
      width: max-content;
      box-sizing: border-box;
      background-color: #eaf3fc;
      color: #555;
      box-sizing: border-box;
      padding-bottom: 120rpx;
      .ulList {
        position: relative;
        text-align: center;
        padding: 30rpx 20rpx 20rpx;
        text {
          display: block;
          font-size: 30rpx;
          margin-bottom: 10rpx;
          &.ac {
            font-weight: 700;
          }
        }
        &.ac {
          background-color: #fff;
          text {
            color: $uni-text-color;
          }
          .lis {
            position: relative;
            padding: 20rpx 10rpx;
            font-size: 24rpx;
            &.ac {
              color: #0179f1;
              &::after {
                content: ' ';
                position: absolute;
                top: 50%;
                left: -15rpx;
                width: 7rpx;
                height: 25rpx;
                border-radius: 3rpx;
                background-color: #007af0;
                transform: translateY(-50%);
              }
            }
          }
          &::after {
            content: ' ';
            position: absolute;
            bottom: -20rpx;
            right: 0;
            width: 20rpx;
            height: 20rpx;
            background-color: #fff;
          }
          &::before {
            content: ' ';
            position: absolute;
            bottom: -20rpx;
            right: 0;
            width: 20rpx;
            height: 20rpx;
            border-radius: 0 50% 0 0;
            z-index: 2;
            background-color: #eaf3fc;
          }
        }
      }
    }
    .right {
      flex: 1;
      position: relative;
      box-sizing: border-box;
      padding: 40rpx 20rpx 20rpx;
      .scroll-Y {
        width: 100%;
        height: 76vh;
        box-sizing: border-box;
        padding-bottom: 120rpx;
        .title {
          position: relative;
          font-size: 30rpx;
          color: #007af0;
          width: max-content;
          margin: 60rpx auto 30rpx;
          &.ac {
            margin-top: 0rpx;
          }
          &::after,
          &::before {
            content: ' ';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36rpx;
            height: 1rpx;
            background-color: #007af0;
          }
          &::after {
            left: -50rpx;
          }
          &::before {
            right: -50rpx;
          }
        }
      }
      .ulboxs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 60rpx 20rpx;
        place-content: center;
        margin: 20rpx 0;
        .lib {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          image {
            width: 152rpx;
            height: 151rpx;
            border-radius: 20rpx;
          }
          .name {
            text-align: center;
            font-size: 24rpx;
            margin-top: 16rpx;
          }
        }
      }
    }
  }
}
.wfw_box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;

  text {
    color: $uni-text-color-grey;
  }
}
.wfw_img {
  margin-bottom: 20rpx;
  width: 200rpx;
}
</style>
